<template>
  <div class="lsc-home">
    <van-search placeholder="请输入商品名称" v-model="searchValue" v-on:focus="showSearch=true" />
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="thumb in banners" :key="thumb.id">
        <img :src="thumb.file_path">
      </van-swipe-item>
    </van-swipe>
    <van-popup v-model="showSearch" position="right" :overlay="false" style="width:100%;height:100%;overflow-y: auto; ">
      <div class="lsc-main-back" @click="showSearch=false">
        <van-icon name="arrow-left"/>
      </div>
      <van-search
        v-model="searchValue"
        placeholder="请输入商品名称"
        show-action
        @search="onSearch"
        style="padding:4px 0"
      >
        <div slot="action" @click="onSearch(searchValue)">搜索</div>
      </van-search>
      
      <div class="hot-search">
        <div class="hot-search-head" v-if="searchKey.length">最近搜索</div>
        <div id="searchland5" class="hot-search-tags">
          <span v-for="(item,index) in searchKey" :key="index">
            <a @click="goodSearchKey(item)">
              <i class="hot-search-move">{{item}}</i>
            </a>
          </span>
        </div>
      </div>
      
      <div class="lsc-loading" v-if="!searchGoodsList.length">查无记录</div>
      
      <div>
        <van-card
          v-for="(item,index) in searchGoodsList"
          :key="index"
          :title="item.name"
          :desc="item.model" 
          :thumb="item.pic_path"
        >
          <div slot="footer">
            <van-button size="small" @click="gotoBuy(item.model, item.class_id)" >去购买</van-button>
          </div>
        </van-card>
      </div>
    </van-popup>

    <div class="hot-search">
      <div id="searchland5" class="hot-search-tags">
        <span v-for="item in classList" :key="item.id">
          <router-link :to="'/items?id='+item.id">
            <i class="hot-search-move">{{item.name}}</i>
          </router-link>
        </span>
      </div>
    </div>
    <div>
      <ul class="new-search-tab bdr-bom">
        
        <li submenu="prcie" class="new-change-eleven ">
          <span class="J_ping" style="font-weight:600;">为您推荐</span>
        </li>
        <li submenu="prcie" class="new-change-eleven new-sort-price " :class="{'active': hotNum!=0}" @click="goodSearch('hot')">
          <span class="J_ping " :class="{'arrow-up': hotNum==1,'arrow-down': hotNum==2}">人气</span>
        </li>
        <li submenu="prcie" class="new-change-eleven new-sort-price " :class="{'active': newNum!=0}" @click="goodSearch('new')" >
          <span class="J_ping  " :class="{'arrow-up': newNum==3,'arrow-down': newNum==4}">最新</span>
        </li>
      </ul>
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoadAllGoods"
      >
       <!-- <van-cell v-for="item in allGoodsList" :key="item" :title="'123'" /> -->
        <ul class="find-similar-ul cf">
          <li class="similar-li" v-for="(item,index) in allGoodsList" :key="index">
            <router-link :to="'/details?modelNo=' + item.model + '&cid='+item.class_id">
              <div class="similar-product">
                <div class="similar-posre">
                  <img 
                    class="Jschangewidth opa1" 
                    :src="item.pic_path" 
                    style="width: 11rem; height: 11rem; opacity: 1;">
                </div>
                <div class="similar-product-info">
                  <p class="similar-product-price">
                    名称：{{item.name}}
                  </p>
                  <p class="similar-product-price">
                    型号：{{item.model}}
                  </p>
                </div>
                <p class="praise-info">
                  <span class="guess-button J_ping" >去购买</span>
                </p>
              </div>
            </router-link>
            <div class="recommend-ad-mark"></div>
          </li>
        </ul>
      </van-list>

    </div>
    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
    <div style="clear:both"></div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="shop" to="/main">首页</van-tabbar-item>
      <van-tabbar-item icon="cart" :info="this.baseInfo.cart_num.toString()" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact"  to="/mycenter">我</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import api from '../api'
import { mapGetters } from  'vuex'

export default {
  name: 'home',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading',
      baseInfo: 'getBaseInfo',
      active: 'getTabbarActive',
      searchKey: 'getSearchKey',
      classList: 'getCategory'
    })
  },
  data () {
    return {
      banners: [],
      loading: false,
      finished: false,
      allGoodsList: [],
      searchGoodsList: [],
      goodsKey: {
        pageindex: 0,
        pagesize: 10,
        key: '',
        sort_type: 0,
        class_id: 0
      },
      getSearchKey: {
        pageindex: 1,
        pagesize: 50,
        key: '',
        sort_type: 0,
        class_id: 0
      },
      searchValue: '',
      historyKey: [],
      showSearch: false,
      hotNum: 0,
      newNum: 0
    }
  },
  created() {
    // 获取banner
    this.getBanners()
    // 为您推荐-产品列表
    this.getClassList()

    setTimeout(()=>{
      this.$nextTick(()=>{
        this.historyKey = this.searchKey
        
        // 获取各辅料选项初始值
        // this.$store.dispatch('fetchAccesories')

        // 获取搜索的历史记录
        this.$store.dispatch('fetchSearchKey')
      })
    },100)
  },
  activated() {
    // 获取底部导航激活索引
    this.$store.dispatch('fetchTabbarActive', 0)
  },
  deactivated() {
    this.showSearch = false
  },
  methods: {
    getBanners() {
      this.axios.get(api.masterData.banners, {params:{top: 3}})
        .then((res) => {
          this.banners = res.data.data
        })
    },
    getClassList() {
      this.axios.get(api.good.classList)
        .then((res) => {
          this.$store.dispatch('fetchCategory', res.data.data)
        })
    },
    goodSearch(types) {
      this.allGoodsList = []
      this.goodsKey.pageindex = 0
      this.goodsKey.sort_type = this.goodSrot(types)
      this.onLoadAllGoods(0)
    },
    goodSearchKey(key) {
      this.searchGoodsList = []
      this.getSearchKey.key = key
      this.getGoodsItems(1)
    },
    goodSrot(type) {

      if(type=='hot') {
        this.newNum = 0
        if(this.hotNum == 0 || this.hotNum == 2){
          return this.hotNum = 1
        }else {
          return this.hotNum = 2
        }
      }else if(type=='new') {
        this.hotNum = 0
        if(this.newNum == 0 || this.newNum == 4){
          return this.newNum = 3
        }else {
          return this.newNum = 4
        }
      }else {
        this.hotNum = 0
        this.newNum = 0
        this.goodsKey.sort_type = 0
      }
    },
    onSearch(key) {
      if(!key) return
      let findSame = this.historyKey.findIndex((val)=>{ return val == key })
      if(findSame < 0 && this.historyKey.length ==12) this.historyKey.splice(0, 1)
      if(findSame < 0 && this.historyKey.length <12) this.historyKey.push(key)
      localStorage.setItem('searchKey', this.historyKey)

      this.$store.dispatch('fetchLoading', true)
      this.$store.dispatch('fetchSearchKey')
      this.goodSearchKey(key)
    },
    getGoodsItems(isSearch) {
      // let params = isSearch ? this.getSearchKey : this.goodsKey
      this.$store.dispatch('fetchLoading', true)
      this.axios.post(api.good.search, this.getSearchKey)
        .then(res=>{
        this.$store.dispatch('fetchLoading', false)
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.searchGoodsList = res.data.data
            this.getSearchKey.total = res.data.pageinfo.total
          }
        })
    },
    onLoadAllGoods() {
      this.loading = true;
      this.goodsKey.pageindex += 1
      setTimeout(()=>{
        this.axios.post(api.good.search, this.goodsKey)
          .then(res=>{
            if (res.data.retcode != 0) {
              this.$toast.fail(res.data.retmsg);
            }else {
              this.allGoodsList = res.data.data ? this.allGoodsList.concat(res.data.data) : []
              this.loading = false;
              if (this.allGoodsList.length >= res.data.pageinfo.total) {
                this.finished = true;
              }else {
                this.finished = false;
              }
            }
          })
      }, 500)
    },
    gotoBuy(model,cid) {
      this.$router.push(`details?modelNo=${model}&cid=${cid}`)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.lsc-home {
  padding-bottom: 50px;
  background-color: #fff;
}
.lsc-main-back {
  width:3rem; 
  height:42px;
  line-height:47px;
  float:left;
  text-align:center;
  background:#f2f2f2;
}
.lsc-home .van-search__action>div {
  padding: 0 10px;
}
.lsc-home .van-card__row {
  margin-top: 8px;
}
.lsc-home .goods-swipe img {
  width: 100%;
  height: 10rem;
  display: block;
}

.hot-search,.recent-search {
    padding-left: 13px;
    margin-top: 15px
}
.hot-search-head {
    padding: 5px 15px 11px 0;
}
.hot-search-move {
  font-style: normal;
}
.hot-search-tags,.recent-search-tags {
    padding-right: 2px;
    overflow: hidden;
    font-size: .75rem;
    text-align: center
}

.hot-search-tags .limit,.recent-search-tags .limit {
    overflow: hidden;
    height: 33px
}

.hot-search-tags a,.recent-search-tags a {
    height: 1.4375rem;
    line-height: 1.5rem;
    border-radius: 3px;
    display: block;
    color: #686868;
    white-space: nowrap;
    min-width: 3.3rem;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background-color: #f0f2f5;
    padding-left: 13px;
    padding-right: 13px;
    overflow: hidden
}

.hot-search-tags span,.recent-search-tags span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    padding-right: 10px;
    padding-bottom: 10px;
    float: left
}

.lsc-home .similar-li {
  /* float: left; */
  width: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 4px;
  position: relative;
  display: inline-block;
}

.lsc-home .similar-li:nth-child(odd) {
    padding-right: 2px
}

.lsc-home .similar-li:nth-child(2n) {
    padding-left: 2px
}
.lsc-home .similar-li::after {
  display: block;
  content: '';
  clear: both;
}

.lsc-home .similar-product {
    background-color: #fff;
    padding-bottom: 6px;
    font-size: 0
}

.lsc-home .similar-product .praise-info {
    display: block;
    padding: 0 4px;
    position: relative;
    top: 1px;
    height: 25px;
    line-height: 25px
}

.lsc-home .similar-product img {
    width: 100%;
    display: block
}

.lsc-home .similar-product-info {
    height: 45px;
    margin: 5px;
    font-size: 13px;
    overflow: hidden;
    padding: 0;
}

.lsc-home .similar-product-price {
  color: #333;
  display: block;
  padding: 0 5px 0 4px;
  position: relative;
  top: 1px;
  left: 0;
  height: 15px;
  /* padding: 2px 0; */
  /* width: 80%; */
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}

.lsc-home .guess-button {
    display: block;
    position: absolute;
    top: 0;
    right: 8px;
    text-align: center;
    color: #686868;
    background: #f0f2f5;
    font-size: 12px;
    width: 49px;
    height: 24px;
    line-height: 25px
}

.lsc-home .guess-button:after {
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: top left
}
.lsc-home .new-search-tab {
    position: relative;
    height: 40px;
    font-size: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}
.lsc-home .new-change-eleven {
    width: 25%;
    border-right: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    line-height: 38px
}

.lsc-home .new-change-eleven span {
    color: #232326;
    display: block
}

.lsc-home .new-change-eleven.active span {
    color: #f15353 !important
}
.lsc-home .new-change-eleven span:after,.new-change-eleven.active span:after {
    display: block;
    background: url("https://st.360buyimg.com/so/images/search/jd-sprites.png?v=12") no-repeat;
    background-size: 200px 200px
}
.lsc-home .new-sort-price span:after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 10px;
    background-position: -170px -30px;
    margin-left: 4px
}

.lsc-home .new-sort-price.active span.arrow-down:after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 10px;
    background-position: -170px -15px;
    margin-left: 4px
}

.lsc-home .new-sort-price.active span.arrow-up:after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 10px;
    background-position: -170px 0;
    margin-left: 4px
}
</style>
